import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Checkbox,
  Radio,
  Space,
  InputNumber,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
import AddModal from "./AddModal";
import CopyModal from "./CopyModal";
import { PlusOutlined } from "@ant-design/icons";

const Page = (props) => {
  const { dispatch, submitLoading } = props;
  const [form] = Form.useForm();
  const addRef = useRef(null);
  const actionRef = useRef();
  const copyRef = useRef(null);
  const [row, setRow] = useState({});

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const editInfo = (params) => {
    setRow({ ...params });
    addRef.current.form.setFieldsValue(params);
    let options = JSON.parse(params.options);
    addRef.current.setTitleType(1);
    addRef.current.tableRef.current.setDataSource(options);
    addRef.current.tableRef.current.setEditableRowKeys(
      options.map((o) => o.id)
    );
    addRef.current.setOpen(true);
  };

  const submitForm = async (params) => {
    dispatch({
      type: `${namespace}/submitItem`,
      params,
      callback: () => {
        addRef.current.setOpen(false);
        actionRef.current?.reload();
      },
    });
  };

  const toggleState = (params) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: () => {
        actionRef.current?.reload();
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    width: 350,
    render: (_, record) => {
      const _status = parseInt(record.status, 10);
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              submitForm({ ...record, id: undefined });
            }}
          >
            复制题目
          </Button>
          <Button
            type="link"
            onClick={() => {
              editInfo(record);
            }}
          >
            编辑
          </Button>
          {_status === 0 ? (
            <Button
              type="link"
              danger
              onClick={() =>
                toggleState({
                  ...record,
                  status: "1",
                })
              }
            >
              下架
            </Button>
          ) : (
            <Button
              type="link"
              onClick={() =>
                toggleState({
                  ...record,
                  status: "0",
                })
              }
            >
              上架
            </Button>
          )}
        </Space>
      );
    },
  };

  return (
    <PageContainer>
      <ProTable
        // scroll={{ x: 800 }}
        actionRef={actionRef}
        toolBarRender={() => [
          <Button
          icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              setRow({});
              addRef.current.setTitleType(0);
              addRef.current.form.resetFields();
              addRef.current.tableRef.current.setDataSource([]);
              addRef.current.setOpen(true);
            }}
          >
            新增题库
          </Button>,
        ]}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        columns={calcColumns({ operate })}
      />
      <AddModal ref={addRef} submitFormFun={submitForm} row={row} />
      <CopyModal ref={copyRef} />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
